{% extends "base/base.html" %}
{% block title %}
Service | SwarmOps - Docker管理平台
{% endblock %}
{% block container %}
{% set Services = g.service.GET(request.args.get("id", request.args.get("name")), core=True, core_convert=True).data %}
{% if not Services %}
<div class="alert alert-danger" role="alert"><i class="icon-info-sign"></i> 没有服务或活跃集群异常!!!</div>
{% endif %}
<p>

    <a href="{{ url_for('ui.service') }}"><button type="button" class="btn btn-default"><i class="icon-repeat"></i> Reload</button></a>
    <a href="javascript:ServiceCreate()"><button type="button" class="btn btn-success">创建服务</button></a>
    <a href="javascript:ServiceDeleteMore()"><button type="button" class="btn btn-danger">批量删除服务</button></a>
</p>
<table class="table table-bordered table-hover table-condensed table-responsive">
    <thead>
        <tr class="active">
            <th style="vertical-align: middle; text-align: center;">Name</th>
            <th style="vertical-align: middle; text-align: center;">ID</th>
            <th style="vertical-align: middle; text-align: center;">Image</th>
            <th style="vertical-align: middle; text-align: center;">Replicas</th>
            <th style="vertical-align: middle; text-align: center;">Env</th>
            <th style="vertical-align: middle; text-align: center;">Mounts</th>
            {% if request.args.get("show") %}
            <th style="vertical-align: middle; text-align: center;">CreatedAt</th>
            <th style="vertical-align: middle; text-align: center;">UpdatedAt</th>
            <th style="vertical-align: middle; text-align: center;">UpdateStatus</th>
            <th style="vertical-align: middle; text-align: center;">NetMode</th>
            <th style="vertical-align: middle; text-align: center;">NetVip</th>
            <th style="vertical-align: middle; text-align: center;">NetPorts</th>
            {% endif %}
        </tr>
    </thead>
    <tbody>
    {% for service in Services %}
        <tr>
            <td style='vertical-align: middle; text-align: center;'>
                <div class="btn-group">
                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" style="width: auto; min-width: 120px; max-width: 200px">{{ service.Name }} <span class="caret"></span></button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="javascript:ServiceRollingUpgrade('{{ service.ID }}')"><scan class="text-success">滚动升级</a></a></li>
                        <li><a href="javascript:ServiceUpdate('{{ service.ID }}')"><scan class="text-primary">更新服务</a></a></li>
                        <li><a href="javascript:ServiceDetail('{{ service.ID }}')"><scan class="text-primary">详细信息</a></a></li>
                        <li><a href="javascript:ServiceDelete('{{ service.ID }}')"><scan class="text-danger">删除服务</a></a></li>
                        <li><a href="javascript:ServiceShowNginx('{{ service.ID }}')"><scan class="text-primary">Nginx配置</scan></a></li>
                    </ul>
                </div>
            </td>
            <td style='vertical-align: middle; text-align: center;'>{{ service.ID }}</td>
            <td style='vertical-align: middle; text-align: center;'>{{ service.Image }}</td>
            <td style='vertical-align: middle; text-align: center;'>
            {{ service.Replicas }}<br/>
            {% for ip in g.service.GetServiceNode(serviceId=service.ID).data.ips %}
                {% for port in service.NetPorts %}
                    {% if port %}
                      <a href="http://{{ ip }}:{{ port.split(':')[0] }}" target="_blank"><code>{{ ip }}:{{ port.split(":")[0] }}</code></a><br/>
                    {% else %}
                      <code>{{ ip }}</code><br/>
                    {% endif %}
                {% endfor %}
            {% endfor %}
            </td>
            <td style='vertical-align: middle;'>
            {% for env in service.Env or [] %}
                {{ env }}<br/>
            {% endfor %}
            </td>
            <td style='vertical-align: middle;'>
            {% for mount in service.Mounts or [] %}
                {{ mount }}<br/>
            {% endfor %}
            </td>
            {% if request.args.get("show") %}
            <td style='vertical-align: middle; text-align: center;'>{{ service.CreatedAt }}</td>
            <td style='vertical-align: middle; text-align: center;'>{{ service.UpdatedAt }}</td>
            <td style='vertical-align: middle; text-align: center;'>{{ service.UpdateStatus }}</td>
            <td style='vertical-align: middle; text-align: center;'>{{ service.NetMode }}</td>
            <td style='vertical-align: middle;'>
            {% for vip in service.NetVip or [] %}
                {{ vip }}<br/>
            {% endfor %}
            </td>
            <td style='vertical-align: middle;'>
            {% for port in service.NetPorts or [] %}
                {{ port }}<br/>
            {% endfor %}
            </td>
            {% endif %}
        </tr>
    {% endfor %}
    </tbody>
</table>
{% endblock %}
{% block script %}
<script type="text/javascript">
// 服务数量
document.getElementById("service_number").innerHTML= {{ g.service.GET(request.args.get("id", request.args.get("name"))).data|length }};

// 更新导航
var NavId=null;
var As=document.getElementById('tab').getElementsByTagName('li');
NavId = As[1];
console.log(NavId)
NavId.className='active';

// iframe层显示服务Nginx样例
function ServiceShowNginx(serviceId) {
    layer.open({
        type: 2,
        title: 'Nginx配置样例',
        shadeClose: true,
        shade: 0.8,
        area: ['680px', '90%'],
        content: '{{ url_for("ui.service_nginx") }}?serviceId=' + serviceId
    });
}

// 询问框、iframe层删除单个服务
function ServiceDelete(serviceId) {
    layer.confirm('你确定要删除此服务?', {
        btn: ['确认删除','我再想想']
    }, function(){
        console.warn("将要删除服务"+serviceId);
        if (serviceId) {
            $.ajax({
                url: "{{ url_for('apis.core.service') }}",
                method: 'DELETE',
                async: false,
                datatype: 'json',
                data: {"serviceId": serviceId},
                success: function(res) {
                    console.log(res);
                    if (res.success==true) {
                        layer.msg("Delete Service Successfully", {icon: 1, time: 3*1000});
                        document.location.reload(); //重载当前页面
                    } else {
                        layer.msg("Delete Service Failed. "+res.msg, {icon: 2, time: 15*1000});
                    }
                },
            });
        };
    }, function() {
        console.log("canel");
    });
}

// iframe层删除多个服务
function ServiceDeleteMore() {
    layer.open({
        type: 2,
        title: '批量删除服务',
        shadeClose: true,
        shade: 0.8,
        area: ['680px', '90%'],
        content: '{{ url_for("ui.service_delete") }}'
    });
}

// iframe层更新服务
function ServiceUpdate(serviceId) {
    layer.open({
        type: 2,
        title: '更新服务',
        shadeClose: true,
        shade: 0.8,
        area: ['800px', '90%'],
        content: '{{ url_for("ui.service_update") }}?serviceId=' + serviceId
    });
}

// iframe层创建服务
function ServiceCreate() {
    layer.open({
        type: 2,
        title: '创建服务',
        shadeClose: true,
        shade: 0.8,
        area: ['800px', '90%'],
        content: '{{ url_for("ui.service_create") }}'
    });
}

// iframe层服务详细信息
function ServiceDetail(serviceId) {
    layer.open({
        type: 2,
        title: '查看详细服务信息',
        shadeClose: true,
        shade: 0.8,
        area: ['680px', '90%'],
        content: '{{ url_for("ui.service_detail") }}?serviceId='+serviceId
    });
}

// prompt层滚动升级服务
function ServiceRollingUpgrade(serviceId) {
    layer.prompt({title: '输入新标签进行滚动升级操作', formType: 0}, function(tag, index){
        layer.close(index);
        $.ajax({
            url: "{{ url_for('apis.core.rollingupgradeservice') }}",
            method: 'POST',
            async: false,
            datatype: 'json',
            data: {"serviceId": serviceId, "tag": tag},
            success: function(res) {
                console.log(res);
                if (res.success==true) {
                    layer.msg("RollingUpgrade Service Successfully", {icon: 1, time: 3*1000});
                    document.location.reload(); //重载当前页面
                } else {
                    layer.alert('RollingUpgrade Service Failed, because ' + res.msg, {icon: 2, time: 15*1000});
                }
            },
        });
    });
}
</script>
{% endblock %}
